<template>
  <div class="edit-device">
    <div>
      <label>{{ $t("route.Device") }}</label>
      <div></div>
      <button>
        <img /><label>{{ $t("route.View_device") }}</label>
      </button>
    </div>

    <div>
      <div class="div-1">
        <label class="title">{{ $t("route.Head_Model") }}：</label>
        <div class="content">
          <label>{{ device.noseCode }}</label>
          <el-button class="mgr-left-10" @click="click(4)">{{
            $t("route.modify")
          }}</el-button>
        </div>
        <label class="title">{{ $t("route.Serial") }}：</label>
        <label class="content">{{ device.serialNum }}</label>
      </div>

      <div class="div-1">
        <label class="title">{{ $t("route.All2") }}：</label>
        <el-select
          filterable
          class="content"
          @change="kindChange"
          style="margin-left: 10px"
          v-model="device.kind"
          :placeholder="$t('route.Please_select_the_type')"
        >
          <el-option v-for="item in kindOptions" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
        <label class="title">{{ $t("route.type") }}：</label>
        <el-select
          disabled
          class="content"
          filterable
          size="default"
          v-model="device.typeNum"
          @change="typeNumChange"
        >
          <el-option
            v-for="item in typeNumOptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>

      <div class="div-1">
        <label class="title">{{ $t("route.ZT") }}：</label>
        <label class="content">{{
          device.powerOn ? $t("route.Startup") : $t("route.Shutdown")
        }}</label>
        <label class="title">{{ $t("route.Working_position") }}：</label>
        <label class="content">{{ formatState(device.state) }}</label>
      </div>

      <div class="div-1">
        <label class="title">{{ $t("route.jockey") }}：</label>
        <el-select
          class="content"
          size="default"
          @change="userChange"
          filterable
          remote
          :remote-method="getFilterUser"
          v-model="device.userId"
          :placeholder="$t('route.Please_enter_employee_name')"
        >
          <el-option
            v-for="item in userOptions"
            :key="item.id"
            :label="item.nickname"
            :value="item.id"
          />
        </el-select>
        <label class="title">{{ $t("route.working_procedure") }}：</label>
        <label class="content">{{ device.craft }}</label>
      </div>

      <div class="div-1">
        <label class="title">{{ $t("route.Startup_time") }}：</label>
        <label class="content">{{
          device.bootUpTime == null
            ? "--:--"
            : new Date(device.bootUpTime).format("hh:mm:ss")
        }}</label>
        <label class="title">{{ $t("route.Startup_duration") }}：</label>
        <label class="content">{{ formatDur(device.bootUpDur) }}</label>
      </div>

      <div class="div-1">
        <label class="title">{{ $t("route.Sewing_time") }}：</label>
        <label class="content">{{ formatDur(device.workDur) }}</label>
        <label class="title">{{ $t("route.Crop_rate") }}：</label>
        <label class="content">{{ (device.useEff * 100).toFixed(2) + "%" }}</label>
      </div>

      <div class="div-1">
        <label class="title">{{ $t("route.Idle_time") }}：</label>
        <label class="content">{{ formatDur(device.idleDur) }}</label>
        <label class="title">{{ $t("route.location") }}：</label>
        <div class="content">
          <label>{{
            device.workshop ? device.workshop + " " + device.proLine : device.store
          }}</label>
          <el-button class="mgr-left-10" @click="click(1)">{{
            $t("route.modify")
          }}</el-button>
        </div>
      </div>

      <div class="div-1">
        <label class="title">{{ $t("route.Automatic_power_off_min") }}：</label>
        <div class="content">
          <el-switch @change="switchChange" v-model="device.iSinterrupt" class="switch" />
          <el-input-number
            size="default"
            class="input-number"
            v-if="device.iSinterrupt"
            v-model="device.interruptDur"
            :min="1"
            :step="1"
          />
          <el-button v-if="device.iSinterrupt" class="mgr-left-10" @click="click(0)">{{
            $t("route.preservation")
          }}</el-button>
        </div>
        <label class="title">{{ $t("route.operate") }}：</label>
        <el-button @click="jumpPage('PARAM_LIST')">{{
          $t("route.Equipment_parameters")
        }}</el-button>
        <el-button @click="jumpPage('monitor-3')">{{
          $t("route.Sewing_power")
        }}</el-button>
        <el-button @click="jumpPage('monitor-6')">缝纫状态</el-button>
        <el-button v-show="device.serialNum=='EBAAEE00000003C5'" @click="jumpPage('video-monitor')">视频监控</el-button>
      </div>

      <div class="div-1">
        <label class="title">是否有温度功能：</label>
        <div class="content">
          <el-switch
            @change="switchChange3"
            v-model="this.device.temped"
            class="switch"
          />
        </div>
      </div>

      <!-- <div class="div-1">
				<label class="title">压烫设备：</label>
				<div class="content">
					<el-switch @change='switchChange1' v-model="repairType" class="switch" />
				</div>
			</div> -->
    </div>

    <el-dialog :title="$t('route.modify_location')" v-model="dialogShow1" width="30%">
      <el-radio-group v-model="form.type">
        <el-radio-button :label="$t('route.Workshop')"></el-radio-button>
        <el-radio-button :label="$t('route.Warehouse')"></el-radio-button>
      </el-radio-group>
      <div>
        <el-cascader
          size="default"
          v-if="form.type == $t('route.Workshop')"
          class="width100 mgr-top-10"
          :placeholder="$t('route.Please_select_a_group')"
          :options="proLineOptions"
          @change="proLineChange"
        />
        <el-select
          size="default"
          v-if="form.type == $t('route.Warehouse')"
          v-model="form.store"
          class="width100 mgr-top-10"
          @change="storeChange"
          :placeholder="$t('route.Please_select_a_warehouse')"
        >
          <el-option v-for="item in storeOptions" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button class="width100 mgr-top-10" @click="click(2)">{{
          $t("route.preservation")
        }}</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="$t('route.modey')" v-model="dialogShow2" width="30%">
      <el-radio-group v-model="form.type">
        <el-radio-button :label="$t('route.Head_Model')"></el-radio-button>
      </el-radio-group>
      <div>
        <el-cascader
          size="default"
          v-if="form.type == $t('route.Head_Model')"
          class="width100 mgr-top-10"
          :placeholder="$t('route.please1')"
          :options="proLineOptions"
          @change="proLineChange"
        />
      </div>
      <div>
        <el-button class="width100 mgr-top-10" @click="click(2)">{{
          $t("route.preservation")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import Constant from "../../js/common/constant.js";
import ParamUtils from "../../js/common/param-utils.js";
import i18n from "../../i18n/index";
import { ElMessageBox } from "element-plus";

export default {
  data() {
    return {
      deviceId: null,
      device: {},
      kindOptions: Constant.DEVICE_KIND,
      dialogShow1: false,
      dialogShow2: false,
      proLineOptions: [],
      storeOptions: [],
      typeNumOptions: [],
      userOptions: [],
      form: {
        type: i18n.global.t("route.Workshop"),
        workshop: null,
        proLine: null,
        store: null,
        kind: null,
      },
      repairType: false,
      node: null,
    };
  },
  methods: {
    switchChange(value) {
      if (!value) {
        this.device.iSinterrupt = false;
        this.device.interruptDur = 0;
        var cmd = ParamUtils.format11Cmd(this.device.id, 0x03, 0);
        ParamUtils.sendCmdDevice(this.device.id, cmd, () => {
          this.$message.success(i18n.global.t("route.Successfully_distributed"));
        });
      }
    },

    switchChange1() {
      http.post(
        api.UPDATE_DEVICE_REPAIR_TYPE,
        {
          deviceId: this.deviceId,
          repairType: this.repairType ? 1 : 0,
        },
        (data) => {
          this.device.repairType = this.repairType ? 1 : 0;
        }
      );
    },
    updateNoseCode(noseCode) {
      http.post(
        api.UPDATE_NOSE_CODE,
        {
          deviceId: this.deviceId,
          noseCode: noseCode,
        },
        (data) => {
          this.device.noseCode = noseCode;
        }
      );
    },
    switchChange3() {
      http.post(
        api.UPDATE_DEVICE_TEMP,
        {
          deviceId: this.deviceId,
          temped: this.device.temped ? 1 : 0,
        },
        (data) => {
          this.device.temped = this.temped ? 1 : 0;
        }
      );
    },
    click(index) {
      if (index == 0) {
        var cmd = ParamUtils.format11Cmd(this.device.id, 0x03, this.device.interruptDur);
        ParamUtils.sendCmdDevice(this.device.id, cmd, () => {
          this.$message.success(i18n.global.t("route.Successfully_distributed"));
        });
      } else if (index == 1) {
        this.dialogShow1 = true;
      } else if (index == 2) {
        this.updateDevice();
        this.dialogShow1 = false;
      } else if (index == 3) {
        // this.dialogShow2=true;
      } else if (index == 4) {
        ElMessageBox.prompt("请输入序列号", "修改设备编号", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(({ value }) => {
          this.updateNoseCode(value);
        });
      }
    },
    jumpPage(pageName) {
      this.$router.push({
        name: pageName,
        params: {
          deviceId: this.device.id,
          device: JSON.stringify(this.device),
        },
      });
    },
    formatDur(dur) {
      if (dur == null || dur == undefined) return "---";
      return CommonUtils.formatDur(dur);
    },
    formatState(state) {
      //0:没有异常 1:普通维修 2:大修 3报废 4:异常报警
      if (state == 0) {
        return i18n.global.t("route.normal");
      } else if (state == 1) {
        return i18n.global.t("route.General_maintenance");
      } else if (state == 2) {
        return i18n.global.t("route.Overhaul");
      } else if (state == 3) {
        return i18n.global.t("route.Scrap");
      } else if (state == 4) {
        return i18n.global.t("route.Abnormal_alarm");
      }
    },
    updateDevice() {
      http.post(
        api.UPDATE_DEVICE,
        {
          deviceId: this.deviceId,
          workshop: this.form.workshop,
          proLine: this.form.proLine,
          store: this.form.store,
          typeNum: this.device.typeNum,
          kind: this.device.kind,
        },
        (data) => {
          this.$message.success(i18n.global.t("route.Modified_successfully"));
          this.device.workshop = this.form.workshop;
          this.device.proLine = this.form.proLine;
          this.device.store = this.form.store;
        }
      );
    },
    getDevicePro() {
      http.post(
        api.GET_DEVICE_PRO1,
        {
          deviceId: this.deviceId,
        },
        (data) => {
          this.device = data.data;
          this.device.iSinterrupt = this.device.interruptDur == 0 ? false : true;
          this.isInWorkshop = this.device.store == "";
          this.userOptions.push({
            id: this.device.userId,
            nickname: this.device.nickname,
          });
          this.repairType = this.device.repairType != 0;
        }
      );
    },
    getPorLineRow() {
      http.post(
        api.GET_POR_LINE_ROW,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          this.proLineOptions = data.data;
        }
      );
    },
    getAllStore() {
      http.post(
        api.GET_ALL_STORE2,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          this.storeOptions = data.data;
        }
      );
    },
    proLineChange(value) {
      this.form.workshop = value[0];
      this.form.proLine = value[1];
      this.form.store = "";
    },
    storeChange(value) {
      this.form.workshop = "";
      this.form.proLine = "";
      this.form.store = value;
    },
    typeNumChange() {
      this.updateDevice();
    },
    kindChange() {
      this.updateDevice();
    },
    getAllTypeNum() {
      http.post(api.GET_ALL_TYPE_NUM, {}, (data) => {
        this.typeNumOptions = data.data;
        this.typeNumOptions.unshift(i18n.global.t("route.other"));
      });
    },
    getFilterUser(query) {
      if (CommonUtils.isEmpty(query)) return;
      http.post(
        api.GET_FILTER_USER,
        {
          adminId: this.$store.state.user.id,
          search: query,
        },
        (data) => {
          this.userOptions = data.data;
        }
      );
    },
    userChange() {
      http.post(
        api.BIND_DEVICE,
        {
          deviceId: this.deviceId,
          userId: this.device.userId,
        },
        (data) => {
          this.$message.success(i18n.global.t("route.Modified_successfully"));
        }
      );
    },
    getAllKind() {
      http.post(
        api.GET_ALL_KIND,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          this.kindOptions = data.data;
        }
      );
    },
  },

  created() {
    this.deviceId = CommonUtils.getParam(this, "deviceId", "setDeviceId");
    this.getDevicePro();
    this.getPorLineRow();
    this.getAllStore();
    this.getAllTypeNum();
    this.getAllKind();
  },
};
</script>
<style lang="scss" scoped>
.edit-device {
  color: #444444;
  font-size: 18px;
  padding-right: 20px;
  height: calc(100vh - 100px);
  // overflow: scroll;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;

  > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
  }

  > div:nth-of-type(1) {
    > label:nth-of-type(1) {
      font-weight: 600;
    }

    > div:nth-of-type(1) {
      width: 1px;
      background-color: #cccccc;
      height: 15px;
      margin: 0px 20px;
    }

    > button:nth-of-type(1) {
      background-image: url(../../assets/img/customer-1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 5px 10px;
      border: 0px;
      display: flex;
      color: #ffffff;
      flex-direction: row;
      align-items: center;
      font-weight: 800;

      > img {
        margin-right: 7px;
        width: 15px;
        height: 15px;
        content: url(../../assets/img/customer-2.png);
      }
    }
  }

  > div:nth-of-type(2) {
    flex-direction: column;
    align-items: flex-start;

    .input {
      color: #000000;
    }

    .div-1 {
      display: flex;
      flex-direction: row;
      padding: 10px 0px;
      align-items: center;
      // border: 0.5px solid #eeeeee;

      .title {
        width: 140px;
        text-align: right;
      }

      .content {
        margin-left: 20px;
        width: 300px;
      }

      > button {
        margin-left: 20px;
        width: 100px;
      }

      .switch {
        margin-left: 20px;
      }

      .input-number {
        margin-left: 20px;
      }
    }
  }
}
</style>
